<template>
  <div>
    <div id="people-main">
      <div id="people-top">
        <ModelTitle>
          <template>居民管理</template>
        </ModelTitle>
      </div>
      <el-form ref="form"  label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="people-top">
            <el-form-item label="签约状态">
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
              <el-form-item label="签约机构">
                <el-select v-model="value2" placeholder="请选择">
                  <el-option
                    v-for="item in options2"
                    :key="item.organization_id"
                    :label="item.organization_name"
                    :value="item.organization_id">
                  </el-option>
                </el-select>
              </el-form-item>
        </el-col>
        <el-col :span="6">
              <el-form-item label="医生团队">
                <el-select v-model="value3" placeholder="请选择">
                  <el-option
                    v-for="item in options3"
                    :key="item.doctor_id"
                    :label="item.doctor_name"
                    :value="item.doctor_id">
                  </el-option>
                </el-select>
              </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="people-top-btn">
            <el-button type="primary" @click="addPeople">新增居民档案</el-button>
            <el-button>导出</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="people-top">
              <el-form-item label="服务包">
                <el-select v-model="value4" placeholder="请选择">
                  <el-option
                    v-for="item in options4"
                    :key="item.serve_id"
                    :label="item.serve_name"
                    :value="item.serve_id">
                  </el-option>
                </el-select>
              </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
              <el-form-item label="居民标签">
                <el-select v-model="value5" placeholder="请选择">
                  <el-option v-for="(item, index) in options5" :key="index" :label="item.lable_name" :value="item.lable_id"></el-option>
                </el-select>
              </el-form-item>
        </el-col>
        <el-col :span="9">
          <div class="searchInput">
            <el-input placeholder="请输入内容"></el-input>
            <i class="el-icon-search"></i>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="people-top-btn">
            <i class="el-icon-refresh qh" @click="comName = comName =='peopleContent2'? 'peopleContent':'peopleContent2'"></i>
          </div>
        </el-col>
      </el-row>
      </el-form>
      <div id="people-content">
        <keep-alive>
          <component :is="comName"></component>
        </keep-alive>
      </div>
    </div>    
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '../../components/ModelTitle.vue'
import peopleContent from '../../components/People/PeopleContent.vue'
import peopleContent2 from '../../components/People/PeopleContent2.vue'
export default {
  created(){
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
        this.option2()
        this.option3()
        this.option4()
        this.lableLoad()
  },
  components:{
    ModelTitle,peopleContent,peopleContent2
  },
  data() {
    return {
      list:[],
      options1: [
        {
          value: 1,
          label: '待签约'
        }, {
          value: 2,
          label: '签约中'
        }, {
          value: 3,
          label: '已完成'
        }, {
          value: 4,
          label: '已过期'
        }
      ],
      value1: '',
      options2: [],
      value2: '',
      options3: [],
      value3: '',
      options4: [],
      value4: '',
      options5:[],
      value5:[],
      comName:peopleContent
    }
  },
  methods:{
    option2(){
      axios({
        url:"/sign/getOrganizationList",
        method:"get"
      }).then((res) =>{
        console.log(123456789);
        console.log(res);
        this.options2 = res.data
      })
    },
    option3(){
      axios({
        url:"/doctor/getDoctorList",
        method:"get"
      }).then((res) =>{
        this.options3 = res.data
      })
    },
    option4(){
      axios({
        url:"/sign/getServePageList",
        method:"get"
      }).then((res) =>{
        this.options4 = res.data
      })
    },
    addPeople(){
      this.$router.push({
        path:"/addPeople"
      })
    },
    lableLoad(){
            axios({
                url:"/sign/getLableList",
                method:"get"
            }).then(res => {
                this.options5 = res.data
            })
        }
  }
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #people-main{
        width: 1150px;
        background: white;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0px 15px 20px 15px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .people-top-btn{
      display: flex;
      justify-content: flex-end;
    }
    #people-content{
      width: 100%;
    }
    .searchInput{
      position: relative;
    }
    .searchInput i{
      position: absolute;
      top: 12px;
      right: 10px;
      cursor: pointer;
    }
    .qh{
      font-size: 25px;
      margin-top: 7px;
      margin-right: 10px;
      cursor:pointer;
      color: rgb(167, 167, 167);
      font-weight: bold;
      transition: 0.3s;
    }
    .qh:hover{
      color: rgb(11, 121, 232);
    }
</style>